A Donut chart showing browser market share
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.pie.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="475" height="350">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var donut = new RGraph.Pie({
id: 'cvs',
data: [41,37,16,3,3],
options: {
variant: 'donut',
linewidth: 5,
exploded: 5,
strokestyle: 'rgba(0,0,0,0)',
title: "Browser share",
tooltips: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'],
key: ['MSIE 7 (41%)', 'MSIE 6 (37%)', 'Firefox (16%)', 'Safari (3%)', 'Other (3%)'],
keyShadow: true,
keyShadowOffsetx: 1,
keyShadowOffsety: 1,
keyShadowBlur: 3,
keyShadowColor: '#ccc',
keyAlign: 'right',
align: 'left',
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 3,
centerx: 185
}
}).draw();
};
</script>